<template>
	<div class="search-filter">
		<div class="form-item">
			<select-groups-base
				ref="basicFormRef"
				:prop-list="searchProps"
				:basic-info="basicInfo"
				:show-disabled-project="true"
				:show-disabled-subject="true"
				:show-disabled-chapter="true"
			/>
			<el-button type="text" @click="onShowMoreFilter">更多</el-button>
		</div>

		<div class="operation">
			<el-button @click="onReset">重置</el-button>
			<el-button type="primary" :loading="searchLoading" @click="onSearch">查询</el-button>
		</div>
		<el-drawer
			v-show="showDrawer"
			:visible="showDrawer"
			:before-close="hide"
			size="720px"
		>
			<div slot="title" class="title">
				更多查询
			</div>
			<div class="basic">
				<p class="title">
					<img class="title-icon" src="@rc/assets/images/icon-basic.png" alt="">
					基本信息
				</p>
				<div class="content">
					<select-groups-base
						label-position="right"
						label-width="80px"
						ref="basicFormDrawerRef"
						:basic-info="searchInfo"
						:prop-list="searchProps"
						:show-disabled-project="true"
						:show-disabled-subject="true"
						:show-disabled-chapter="true"
						@change="syncInfo"
					/>
				</div>
			</div>
			<div class="tag">
				<p class="title">
					<img class="title-icon" src="@rc/assets/images/icon-tag.png" alt="">标签信息
				</p>
				<div class="content">
					<select-groups-tag
						ref="labelFormDrawerRef"
						label-position="right"
						label-width="80px"
					/>
				</div>
			</div>
			<div class="log">
				<p class="title"><img class="title-icon" src="@rc/assets/images/icon-opertion.png" alt="">操作信息</p>
				<div class="content">
					<el-form
						ref="logFormDrawerRef"
						:inline="true"
						label-position="right"
						label-width="80px"
						:model="logForm"
					>
						<el-form-item label="研发人" prop="questionDeveloperId">
							<select-teacher
								v-model="logForm.questionDeveloperId"
								clearable
								placeholder="请输入姓名"
								ref="selectTeacher"
							/>
						</el-form-item>
						<el-form-item label="添加人" prop="createUserId">
							<select-employee
								v-model="logForm.createUserId"
								ref="selectTeacher"
							/>
						</el-form-item>
						<el-form-item label="审核人" prop="checkUserId">
							<select-employee
								v-model="logForm.checkUserId"
								ref="selectTeacher"
							/>
						</el-form-item>
						<el-form-item label="修改人" prop="updateUserId">
							<select-employee
								v-model="logForm.updateUserId"
								ref="selectTeacher"
							/>
						</el-form-item>
						<el-form-item label="启用状态" prop="isAvailable">
							<el-select
								placeholder="请选择启用状态"
								v-model="logForm.isAvailable"
								clearable
							>
								<el-option
									v-for="(item,index) in shelveList"
									:key="index"
									:label="item.name"
									:value="item.code"
								/>
							</el-select>
						</el-form-item>
						<el-form-item v-if="listType==='all'" label="审核状态" prop="auditStatus">
							<el-select
								placeholder="请选择审核状态"
								v-model="logForm.auditStatus"
								clearable
							>
								<el-option
									v-for="(item,index) in auditStatusList"
									:key="index"
									:label="item.name"
									:value="item.code"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="添加时间" prop="createDate">
							<el-date-picker
								v-model="logForm.createDate"
								:picker-options="pickerOptions"
								@focus="dateFocus('createDate')"
								class="financialDataContainer"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetimerange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
							/>
						</el-form-item>
						<el-form-item label="修改时间" prop="updateDate">
							<el-date-picker
								v-model="logForm.updateDate"
								:picker-options="pickerOptions2"
								class="financialDataContainer"
								value-format="yyyy-MM-dd HH:mm:ss"
								type="datetimerange"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								@focus="dateFocus('updateDate')"
							/>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<div class="drawer-button flex jc-center ai-center">
				<el-button @click="onReset">重置</el-button>
				<el-button type="primary" @click="onSearch('more')">查询</el-button>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import SelectGroupsBase from '../../components/select-groups-base/index.vue';
import SelectGroupsTag from '../../components/select-groups-tag/index.vue';
import SelectTeacher from "@rc/pages/components/async/select-teacher.vue";
import SelectEmployee from "@rc/pages/components/async/select-employee.vue";
import questionApi  from "@rc/apis/rc/question.mjs";
export default {
    props:{
        //all 全部试题 audit待审核
        listType: {
            type:String,
            default:'all'
        },
        searchLoading:{
            type:Boolean,
            default:false
        }
    },
    components:{
        SelectGroupsBase,
        SelectGroupsTag,
        SelectTeacher,
        SelectEmployee
    },
    data(){
        return {
            searchProps:["projectId","subjectId","chapter", "knowledgePoint","questionType"],
            showDrawer:false,//控制显示更多筛选项
            logForm:{},//操作信息表单信息
            yearList:[],//年份数据
            shelveList:[],
            auditStatusList:[],
            searchInfo:{},//
            basicInfo:{},
            pickerMinDate1:'',//控制添加时间的不可选择日期
            pickerMinDate2:'',//控制修改时间的不可选择日期
            pickerOptions: {//添加时间限制时间跨度一年
                onPick: obj => {
                    if(obj.minDate){
                        this.pickerMinDate1 = new Date(obj.minDate).getTime();
                    }
                },
                disabledDate: time => {
                    if (this.pickerMinDate1) {
                        const day1 = 365 * 24 * 3600 * 1000;
                        let maxTime = this.pickerMinDate1 + day1;
                        let minTime = this.pickerMinDate1 - day1;
                        return time.getTime() > maxTime || time.getTime() < minTime;
                    }
                }
            },
            pickerOptions2: {//修改时间限制时间跨度一年
                onPick: obj => {
                    if(obj.minDate){
                        this.pickerMinDate2 = new Date(obj.minDate).getTime();
                    }
                },
                disabledDate: time => {
                    if (this.pickerMinDate2) {
                        const day1 = 365 * 24 * 3600 * 1000;
                        let maxTime = this.pickerMinDate2 + day1;
                        let minTime = this.pickerMinDate2 - day1;
                        return time.getTime() > maxTime || time.getTime() < minTime;
                    }
                }
            }
        };
    },
    watch:{
        showDrawer:{
            immediate:true,
            handler(){
                this.queryQuestionEnableStatus();
                this.queryQuestionAuditStatus();
            }
        }
    },
    methods: {
        //清空限制的时间
        dateFocus(key) {
            if(key==='updateDate' && !this.logForm.updateDate){
                this.pickerMinDate2 = '';
            }
            if(key==='createDate' && !this.logForm.createDate){
                this.pickerMinDate1 = '';
            }
        },
        //获取试题启用状态列表
        queryQuestionEnableStatus(){
            questionApi.queryQuestionEnableStatus({
                success: (data) => {
                    this.shelveList = data;
                }
            });
        },
        //获取试题审核状态列表
        queryQuestionAuditStatus(){
            questionApi.queryQuestionAuditStatus({
                success: (data) => {
                    if(this.listType === 'audit'){ // 待审核移除审核通过选项
                        let index = data.findIndex((status)=>status.code==='Y');
                        data.splice(index,1);
                    }
                    this.auditStatusList = data;
                }
            });
        },
        /**
         * 点击更多
         */
        onShowMoreFilter() {
            this.showDrawer = true;
            this.searchInfo = JSON.parse(JSON.stringify(this.$refs.basicFormRef.api_result()));
        },
        /**
         * 更多筛选项数据变化时,更改外层筛选项
         */
        syncInfo(data){
            this.basicInfo = JSON.parse(JSON.stringify(data));
        },
        //隐藏更多筛选项
        hide() {
            this.showDrawer = false;
        },
        /**点击查询 */
        onSearch(isMore){
            if(isMore){
                this.showDrawer = false;
            }
            this.$emit('submit');
        },
        api_result(){
            //处理传参
            let params = {};

            //获取参数

            params = {
                ...this.logForm,
                ...this.$refs.basicFormRef.api_result(),
            };
            //不管是否展开抽屉 都按照全部信息查询
            if(this.$refs.labelFormDrawerRef){
                let {applicableYear,areaList,labelList}= this.$refs.labelFormDrawerRef.api_result();
                labelList = labelList.filter(label=>label.labelDetailId);
                let labelDetailIds = labelList.map(label=>label.labelDetailId);
                params = {
                    ...params,
                    applicableYear,
                    areaId:areaList.length?areaList[0].cityId:'',
                    labelDetailIds,
                };
            }
            if(params.createDate && params.createDate.length){
            params.createStartTime= params.createDate[0];
            params.createEndTime = params.createDate[1];

            }
            if(params.updateDate && params.updateDate.length){
            params.updateStartTime = params.updateDate[0];
            params.updateEndTime = params.updateDate[1];

            }
            delete params.createDate;
            delete params.updateDate;

            const {projectId,chapterList,knowledgeList} = params;
            params.projectId = projectId && projectId.length ? projectId[projectId.length-1]:'';
            params.chapterId = chapterList.length? chapterList[0].chapterId:'';
            params.knowledgeId = knowledgeList && knowledgeList.length? knowledgeList[0].knowledgeId:'';

            delete params.questionDeveloperName;
            delete params.projectName;
            delete params.subjectName;
            delete params.chapterList;
            delete params.knowledgeList;
            delete params.chapterIds;
            delete params.knowledgeName;
            console.log("查询条件",params);
            return params;
        },
        /**
         * 点击更多筛选信息
         */
        onReset() {
            this.basicInfo={};
            this.searchInfo={};
            this.logForm={};
            this.$refs.basicFormRef && this.$refs.basicFormRef.api_reset();
            this.$refs.basicFormDrawerRef && this.$refs.basicFormDrawerRef.api_reset();
            this.$refs.labelFormDrawerRef && this.$refs.labelFormDrawerRef.api_reset();
            this.$emit('reset');
        }
    }
};
</script>
<style lang="less" scoped>
    .search-filter{
        display: flex;
        justify-content: space-between;
        align-items:flex-start;
        .operation{
            flex-shrink: 0;
        }
        .form-item{
            display: flex;
            align-items: flex-start;
            margin-right: 10px;
        }
    }
    .basic,.tag,.log {
        margin: 0 20px;
        .title{
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            display: flex;
            align-items: center;
            font-weight: bold;
            .title-icon{
                width: 20px;
                height: 20px;
                margin-right: 6px;
            }
        }
        .content{
            padding: 10px 20px;
        }
    }
    /deep/ .el-drawer__header .title{
        font-size: 16px;
        font-weight: bold;
    }
    /deep/ .el-drawer__body{
        overflow: auto;
    }

    .drawer-button {
        padding-bottom: 30px;
    }
</style>
